<template>
  <div class="introduction">
    <h3 class="title">{{$t('quanx.title')}}</h3>
      <img src="./images/Application.png" style="float:right;width:472px;height:381px; margin-top: -50px;">
    <div class="dataSource firstData">
        <div class="Data-one">
          <p class="questes">
            <span>{{$t('quanx.question1')}}</span>
          </p>
          <div class="flex-wrapper">
            <div v-show="zh">
              <span style="display:inline-block;margin-left:34px;"><a href="../../../static/xls/CBI用户权限申请表.xls"><img src="./images/download.png"></a></span>
            </div>
            <div v-show="en">
              <span style="display:inline-block;margin-left:34px;"><a href="../../../static/xls/CBI Access Request Form.xls"><img src="./images/download1.png"></a></span>
            </div>
          </div>
        </div>
    </div>
    <div class="dataSource">
        <div class="Data-one">
          <p class="questes">
            <span>{{$t('quanx.question2')}}</span>
          </p>
          <div class="flex-wrapper">
            <div style="margin-left: 34px;">
              <div class="title">{{$t('quanx.question21')}}</div>
              <ul>
                <li v-for="item in $t('quanx.answer21')">{{item.answer}}</li>
              </ul>
              <div class="title">{{$t('quanx.question22')}}</div>
              <ul>
                <li>{{$t('quanx.answer22[0].answer')}}</li>
     <!--            <li>（如果您需要开通Qlik license，则需要再增加3个工作日）</li> -->
              </ul>
            </div>
          </div>
        </div>
    </div>
    <div class="dataSource">
        <div class="Data-one">
          <p class="questes">
            <span>{{$t('quanx.question3')}}</span>
          </p>
          <div class="flex-wrapper">
            <div style="display:inline-block;margin-left:34px;">
              <!--<span style="display:inline-block;margin-left:34px;">-->
                <!--{{$t('quanx.answer3')}}-->
              <!--</span>-->
              <span v-html="$t('quanx.answer3')">
              </span>
            </div>
          </div>
        </div>
    </div>
    <div class="dataSource">
        <div class="Data-one">
          <p class="questes">
          <!--   <span>{{$t('quanx.question3')}}</span> -->
          </p>
          <div class="flex-wrapper" style="line-height: 25px;display: none;">
            <div v-html="$t('quanx.ps')">
<!--               <span style="display:inline-block;margin-left:34px;" v-html>
                {{$t('quanx.ps')}}
              </span> -->
            </div>
          </div>
        </div>
    </div>
<!--     <div class="dataSource">
        <div class="Data-one" v-for="item in $t('FAQ.echart.question')">
          <p class="questes">
            <span>{{item.q}}</span>
          </p>
          <div class="flex-wrapper">
            <div>
              <span v-html="item.a.answer"></span><br>
              <a href="javascript:;" style="border-bottom:1px solid #959595;" @click="aboutus">{{item.a.url}}</a>
            </div>
          </div>
        </div>
    </div>
    <div class="dataSource">
      <div class="Data-one" v-for="item in $t('FAQ.search.question')">
        <p class="questes">
          <span v-html="item.q"></span>
        </p>
        <div class="flex-wrapper">
          <div>
            <span v-html="item.a"></span><br>
            <ul v-for="items in item.b">
              <li v-html="items.aList"></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="dataSource">
      <div class="Data-one" v-for="item in $t('FAQ.customer.question')">
        <p class="questes">
          <span>{{item.q}}</span>
        </p>
        <div class="flex-wrapper">
          <div>
            <span v-html="item.a"></span><br>
            <ul v-for="items in item.b">
              <li v-html="items.aList"></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="dataSource">
      <div class="Data-one">
        <div class="flex-wrapper">
          <div>
            <span>{{$t('FAQ.customerValue.question.logical.label')}}</span><br>
            <span>{{$t('FAQ.customerValue.question.logical.statisTime')}}</span><br>
            <span>{{$t('FAQ.customerValue.question.logical.distri')}}</span><br>
            <span>{{$t('FAQ.customerValue.question.logical.rent')}}</span><br>
          </div>
        </div>
        <div class="flex-wrapper">
          <div>
            <span>{{$t('FAQ.customerValue.question.rfm.label')}}</span><br>
            <span>{{$t('FAQ.customerValue.question.rfm.statisTime')}}</span><br>
          </div>
        </div>
      </div>
    </div>
    <div class="dataSource">
      <div class="Data-one" v-for="item in $t('FAQ.others.question')">
        <p class="questes">
          <span>{{item.q}}</span>
        </p>
        <div class="flex-wrapper">
          <div>
            <span v-html="item.a"></span><br>
            <ul v-for="items in item.b">
              <li v-html="items.aList"></li>
            </ul>
          </div>
        </div>
      </div>
    </div> -->
    <div class="btnreturn">
      <a @click="returnl()">
        <i class="icon iconfont icon-houtui" style="font-size:35px;color:#55ADEB;"></i>
      </a>
    </div>
    <!-- <div class="header">
      <h1 class="header-title">{{$t('quanx.title')}}</h1>
      <p>{{$t('quanx.titleChildren')}}</p>
    </div>
    <div class="content">
      <h2>{{$t('quanx.title1')}}</h2>
      <div class="img">
        <img :src="zhImg" alt="">
      </div>
      <h2>{{$t('quanx.title2')}}</h2>
      <div style="width: 150px;">
        <a href="../../../static/CBI%20-%20Access%20Request%20Form.xls">
          <img src="./images/down-excal.png" title="download" class="downFile">
        </a>
      </div>
      <h2>{{$t('quanx.title3')}}</h2>
      <h5 class="Chidren-title">{{$t('quanx.title3Tips')}}</h5>
      <div class="img">
        <img src="./images/title3-tips.png" alt="">
      </div>
      <h2>{{$t('quanx.title4')}}</h2>
      <h5 class="Chidren-title">{{$t('quanx.title4Tips1')}}</h5>
      <h5 class="Chidren-title">{{$t('quanx.title4Tips2')}}</h5>
      <h5 class="Chidren-title">{{$t('quanx.title4Tips3')}}</h5>
      <div class="footer">
      </div>
    </div> -->
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  export default {
    data() {
      return {
        // zhImg: '',
        // num: '',
        zh: '',
        en: ''
      }
    },
    methods:{
      herf(){
        var filter = document.getElementById("filter").offsetTop-50;
        window.scrollTo(500,filter);
      },
      aboutus(){
        this.$router.push('/AboutUs/index')
      },
      goAnchor (selector) {
        var anchor = this.$el.querySelector(selector)
        document.body.scrollTop = anchor.offsetTop
      },
      //回退
      returnl(){
        this.$router.push('/login')
      },
    },
    computed: {
      ...mapGetters(['language'])
    },
    mounted() {
      if(this.language === 'en'){
        // this.zhImg = '../../../static/img/en-img.png'
        this.zh = false
        this.en = true
      }
      if(this.language === 'zh'){
        // this.zhImg = '../../../static/img/zh-img.jpg'
        this.zh = true
        this.en = false
      }
    }
  }
</script>

<style lang="scss" scoped>
.introduction{
  width: 100%;
/*  height: 100%;*/
  min-height: 100%;
  background-color: #f6f7fb;
  padding: 30px 130px 20px 46px;
}
.title{
  margin-top: 4px;
  color:#939cad;
/*  display:flex;*/
/*  align-items: center;*/
  font-size: 32px;
}
#banner{
/*  height: 200px;*/
  width: 100%;
  /*background-image: url(./images/FAQ2_03.jpg);*/
  background-size: 100% 100%;
  position: relative;
  .FaQ{
    font-size: 66px;
    color: #ffffff;
     position: absolute;
     top: 20px;
     left:160px;
  }
}
.firstData{
  display: inline-block !important;
  width:58% !important;
  margin-top: -20px !important;
}
.dataSource{
  width: 100%;
  margin-top: 0px;
/*  // background-color: #FCFCFC;
  // margin-bottom: 20px;
  // padding: 10px 15px;
  // border-radius: 5px;
  // box-shadow: 1px 2px 5px #cccccc;*/
  .faq{
    font-size: 60px;
    font-style: Helvetica Regular;
    background: -webkit-linear-gradient(left, #56c0f5 , #3da2dd); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #56c0f5, #3da2dd); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #56c0f5, #3da2dd); /* Firefox 3.6 - 15 */
    background: linear-gradient(to bottom, #56c0f5 , #3da2dd); /* 标准的语法 */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    height:72px;
    line-height: 72px;
    position: relative;
    margin-left:10px;
    top: -12px;
  }
  .questes{
    font-family: "Helvetica";
    color: #333333;
    padding-top: 15px;
    margin-bottom: 5px;
    margin: 0px;
    span{
      font-weight: bold;
      font-size:22px;
      font-style: 'Helvetica';
      color: #72aff7;
    }
    img{
       vertical-align: bottom;
       margin-right: 5px;

    }
  }
  .flex-wrapper{
    display: flex;
    margin-top: 12px;
    font-family: "Helvetica Regular";
    color: #939cad;
    font-size: 15px;
    .title{
      font-family: 'Helvetica Regular';
      font-size:18px;
      color:#14142d;
    }
    ul li{
      list-style-type: none;
      font-size: 15px;
      font-family: 'Helvetica Regular';
      color: #939cad;
      line-height: 25px;
      margin-left: -38px;
    }
  }
}
// .dataSource{
//   @extend .loginPage;
// }
.dataQuality{
  @extend .dataSource;
}
.Supported{
  @extend .dataSource;
}
.Searching{
  @extend .dataSource;
}
.filter{
  @extend .dataSource;
}
.Reporting{
   @extend .dataSource;
}
.ReportingFunctionality{
   @extend .dataSource;
}
.ulttwo{
  img{
    vertical-align: middle;
  }
  list-style: none;
  padding: 0px;
  margin: 0px;
  line-height: 30px;
  font-family: "MicrosoftYaHei[Regular]";
  color: #959595;
  font-size: 15px;
}
/*  .h5 {
    font-weight: normal;
  }
  .downFile {
    cursor: pointer;
  }

  .quanx {
    background-color: white;
  }*/

  .btnreturn {
    position: fixed;
    right: 15px;
    top: 15px;
    z-index: 99;

  }

 /* .header {
    width: 80vw;
    margin: 0 auto;
    text-align: center;
  }

  .content {
    width: 60vw;
    margin: 0 auto;
    .img {
      img {
        width: 100%;
        border-radius: 5px;
        box-shadow: 1px 3px 5 #cccccc;
      }
    }
  }

  .header-title {
    color: #56ADEB;
    margin: 0;
    padding: 10px 0px;
  }

  .Chidren-title {
    color: #666;
    font-size: 15px;
  }*/
</style>


